<template>
    <div>
        <el-carousel :interval="4000" type="card" height="250px">
            <el-carousel-item v-for="item in slideList" :key="item.slideId" :label="item.slidename">
                <!-- <h3 text="2xl" justify="center"></h3> -->
                <img class="image" :src="item.slideaddress" @click="docs(item)" mode="aspectFill" />
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
import { toRefs, reactive } from '@vue/reactivity'
import { showSlideApi } from "../utils/clientApi"
import { useRouter } from "vue-router"
export default {
    name: "slide",
   
    setup(props, { emit }) {
        const router=useRouter()
        const data = reactive({
            // 数据域
            slideList: []
        })

        // 方法域
        // const sendslideList = (list) => {
        //     // 第一个参数: 事件名
        //     // 第二个参数: 数据
        //     emit('getList', list)
        // }
        const getSlide = () => {
            // sendslideList(data.slideList)
            showSlideApi().then(res => {
                data.slideList = res.data
                console.log(res.data);
            })
        }
        getSlide()
        const docs = (item) => {
            // console.log("","id=",id);
           if(item.slidelinks!==''){
            window.open(item.slidelinks)
           }else{
            router.push({
                        path: "/slidedetail",
                        query:{id:id}
                    })
           }

            

        }
        // 方法域
        return {
            // 结果域
            ...toRefs(data),
            getSlide,
            docs
            // sendslideList
        }

    }

}
</script>

<style scoped>
/*
走马灯
*/
.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

.image {

    width: 100%;
    height: 250px;
}
</style>